<template>
  <el-card>
    <div slot="header" class="clearfix">
      <span>城觅自有订单</span>
    </div>
    <div class="home-container">

      <v-searchForm
        :form-data="filter_info"
        :form-title="formTitle"
        @search="search"
        @reset="reset"
      />

      <v-tableBtns
        :table-title="exportTitle"
        :table-data="exportData"
        :on-export="handleExport"
        title="广告订单"
      />

      <v-table
        :table-title="tableTitle"
        :table-data="tableData"
        @sortChange="sortChange"
        @del="del"
        @edit="edit"
      />

      <v-pagination
        :page-info="pageInfo"
        :get-table-list="getTableList"
      />
    </div>
  </el-card>
</template>

<script>
import { mapGetters } from 'vuex'
import UploadExcelComponent from '@/components/UploadExcel/index.vue'

export default {
  name: 'Home',
  components: { UploadExcelComponent },
  data() {
    return {
      onFilter: false,

      formTitle: [
        {
          cn: '订单id：',
          en: 'ad_id'
        },
        {
          cn: '广告主：',
          en: 'ad_name'
        },
        {
          cn: '抖音号：',
          en: 'name'
        },
        {
          cn: '商务：',
          en: 'swname',
          placeholder: '输入全称'
        },
        {
          cn: '收款状态：',
          en: 'is_receive',
          type: 'select',
          list: [
            {
              label: '未收款',
              value: 0
            },
            {
              label: '已收款',
              value: 2
            }
          ]
        },
        {
          cn: '是否开票：',
          en: 'is_bill',
          type: 'select',
          list: [
            {
              label: '是',
              value: 1
            },
            {
              label: '否',
              value: 0
            }
          ]
        },
        {
          cn: '发布时间：',
          en: 'created_at',
          type: 'time'
        }
      ],
      filter_info: {},

      tableTitle: [
        {
          cn: 'id',
          en: 'ad_id',
          width: '80px',
          sortable: true
        },
        {
          cn: '抖音号',
          en: 'name',
          sortable: true
        },
        {
          cn: '发布时间',
          en: 'publish_at',
          sortable: true
        },
        {
          cn: '广告主',
          en: 'ad_name'
        },
        {
          cn: '品牌名',
          en: 'brand'
        },
        {
          cn: '金额',
          en: 'ad_price',
          sortable: true
        },
        {
          cn: '微赞收款',
          en: 'real_price',
          sortable: true
        },
        {
          cn: '微萊收款',
          en: 'wl_real_price',
          sortable: true
        },
        {
          cn: '商务',
          en: 'swname',
          sortable: true
        },
        {
          cn: '提交人',
          en: 'fans_name'
        },
        {
          cn: '创建时间',
          en: 'created_at',
          width: '180px',
          sortable: true
        },
        {
          cn: '开票状态',
          en: 'invoice_state'
        }
      ],
      tableData: [],

      // 排序
      sidx: 'publish_at',
      sortKey: null,

      exportTitle: [
        {
          cn: 'id',
          en: 'ad_id'
        },
        {
          cn: '公司主体',
          en: 'company_name'
        },
        {
          cn: '公众号',
          en: 'name'
        },
        {
          cn: '广告主',
          en: 'ad_name'
        },
        {
          cn: '广告位置',
          en: 'ad_place_name'
        },
        {
          cn: '广告价格',
          en: 'ad_price'
        },
        {
          cn: '发布时间',
          en: 'publish_at'
        },
        {
          cn: '是否预订',
          en: 'is_book'
        },
        {
          cn: '是否开具发票',
          en: 'is_bill'
        },
        {
          cn: '开票日期',
          en: 'bill_at'
        },
        {
          cn: '发票号(微赞)',
          en: 'bill_num'
        },
        {
          cn: '开票公司(微赞)',
          en: 'bill_company'
        },
        {
          cn: '收款银行(微赞)',
          en: 'receive_bank'
        },
        {
          cn: '收款帐户(微赞)',
          en: 'receive_account'
        },
        {
          cn: '收款日期(微赞)',
          en: 'receive_at'
        },
        {
          cn: '收款金额(微赞)',
          en: 'real_price'
        },
        {
          cn: '发票号(微莱)',
          en: 'wl_bill_num'
        },
        {
          cn: '开票公司(微莱)',
          en: 'wl_bill_company'
        },
        {
          cn: '收款银行(微莱)',
          en: 'wl_receive_bank'
        },
        {
          cn: '收款帐户(微莱)',
          en: 'wl_receive_account'
        },
        {
          cn: '收款日期(微莱)',
          en: 'wl_receive_at'
        },
        {
          cn: '收款金额(微莱)',
          en: 'wl_real_price'
        },
        {
          cn: '订单号',
          en: 'ad_order'
        },
        {
          cn: '提交人',
          en: 'fans_name'
        },
        {
          cn: '是否签合同',
          en: 'is_contract'
        },
        {
          cn: '合同号',
          en: 'contract_num'
        },
        {
          cn: '备注',
          en: 'remark'
        },
        {
          cn: '收款银行',
          en: 'bank_name'
        },
        {
          cn: '采购成本',
          en: 'purchase_cost'
        },
        {
          cn: '是否原创',
          en: '是否原创'
        },
        {
          cn: '编辑负责人',
          en: '编辑负责人'
        },
        {
          cn: '创建时间',
          en: 'created_at'
        },
        {
          cn: '设计负责人',
          en: '设计负责人'
        },
        {
          cn: '摄影负责人',
          en: '摄影负责人'
        },
        {
          cn: '商务人员',
          en: 'swname'
        },
        {
          cn: '商务助理',
          en: 'xmname'
        }
      ],
      exportData: [],
      // f分页
      pageInfo: {
        pageNumber: 1,
        pageSize: 30,
        totalPage: 0,
        totalRow: 0
      }
    }
  },
  activated() {
    this.getTableList()
  },
  methods: {
    getTableList() {
      const loading = this.$loading()
      const datas = {
        ...this.filter_infos,
        sidx: this.sidx,
        sortKey: this.sortKey,
        page: this.pageInfo.pageNumber, rows: this.pageInfo.pageSize,
        type: 1
      }
      this.$get('action/WechatAdvs/dataGrid', datas)
        .then(res => {
          let list
          const data = res.data
          if (data.list && data.list.length) {
            list = data.list.map((item, index) => {
              return item
            })
          }
          this.pageInfo.totalPage = data.totalPage
          this.pageInfo.totalRow = data.totalRow

          this.tableData = list || [];
            loading.close()
        })
        .catch(_=>{
          loading.close()
        })
    },

    // 搜索
    search() {
      this.pageInfo.pageNumber=1
      this.getTableList()
    },
    reset() {
      this.filter_info = {}
      this.getTableList()
    },

    leadIn() {
      this.$router.push({
        name: 'adv_order.lead_in'
      })
    },

    del(val) {
      console.log(val)
    },

    edit(val) {
      console.log(val)
      this.$router.push({
        name: 'adv_order.order_info',
        query: { id: val.row.ad_id }
      })
    },
    addnew() {
      console.log(1)
    },

    handleExport() {
      this.$get('action/WechatAdvs/dataList', {
        type: 1,
        sidx: 'publish_at',
        ...this.filter_infos
      })
        .then(res => {
          const list = res.data.map(item => {
            const obj = item
            const extend = item.extend && JSON.parse(item.extend)
            extend && extend.forEach(item => {
              obj[item.label_name] = item.value
            })
            obj.is_bill = item.is_bill?'是':'否';
            obj.is_book = item.is_book?'是':'否';
            obj.is_contract = item.is_contract?'是':'否';
            return obj
          })
          this.exportData = list || []
        })
    },
    // 排序
    sortChange({ column, prop, order }) {
      console.log(column, prop, order)
      this.sidx = prop || 'publish_at'
      this.sortKey = order === 'ascending' ? 'asc' : null
      this.getTableList()
    }

  },
  computed: {
    ...mapGetters([
      'name',
      'roles'
    ]),
    filter_infos() {
      const data = {}
      const origin = this.filter_info
      for (const key in origin) {
        if (!this.filter_info[key] && this.filter_info[key] !== 0) {
          this.$delete(this.filter_info, key)
          continue
        }
        if (key === 'created_at') {
          data.start_time = origin[key][0]
          data.End_time = origin[key][1]
        } else {
          data[key] = origin[key]
        }
      }
      if (!origin.created_at) {
        delete data.start_time
        delete data.End_time
      }
      return data
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
    .table-menu {
        padding-bottom: 15px;
    }

</style>
